<template>
  <a-modal
    v-model="show"
    :centered="true"
    :keyboard="false"
    :footer="null"
    :width="750"
    @cancel="handleCancleClick"
    title="用户信息">
    <a-layout class="user-info">
      <a-layout-sider class="user-info-side">
        <a-avatar shape="square" :size="115" icon="user" :src="`static/avatar/${userInfoData.avatar}`"/>
      </a-layout-sider>
      <a-layout-content class="user-content-one">
        <p><a-icon type="user"/>登录名称：{{userInfoData.accountCode}}</p>
        <p :title="userInfoData.accountName"><a-icon type="star"/>显示名称：{{userInfoData.accountName? userInfoData.accountName: '暂无'}}</p>
        <p><a-icon type="skin"/>账户类型：{{sex}}</p>
        <p><a-icon type="phone"/>电话：{{userInfoData.mobile ? userInfoData.mobile : '暂未绑定电话'}}</p>
        <p><a-icon type="mail"/>邮箱：{{userInfoData.email ? userInfoData.email : '暂未绑定邮箱'}}</p>
      </a-layout-content>
      <a-layout-content class="user-content-two">
        <p><a-icon type="home"/>账户状态：{{status}}</p>
        <p>
          <a-icon type="smile" v-if="userInfoData.status === '1'"/>
          <a-icon type="frown" v-else/>状态：
          <template v-if="userInfoData.accountStatus === 0">
            <a-tag color="cyan">正常</a-tag>
          </template>
          <template v-else-if="userInfoData.accountStatus === 1">
            <a-tag color="red">过期</a-tag>
          </template>
          <template v-else-if="userInfoData.accountStatus === 2">
            <a-tag color="red">冻结</a-tag>
          </template>

        </p>
        <p><a-icon type="clock-circle"/>创建时间：{{userInfoData.createDate}}</p>
        <p><a-icon type="login" />到期时间：{{userInfoData.expireDate}}</p>
        <p :title="userInfoData.appName"><a-icon type="message"/>所属系统：{{userInfoData.appName}}</p>
      </a-layout-content>
    </a-layout>
  </a-modal>
</template>
<script>
  export default {
    name: 'UserInfo',
    props: {
      userInfoVisiable: {
        require: true,
        default: false
      },
      userInfoData: {
        require: true
      }
    },
    computed: {
      show: {
        get: function () {
          return this.userInfoVisiable
        },
        set: function () {
        }
      },
      status() {
        switch ( (this.userInfoData.accountStatus)) {
          case 0:
            return '正常'
          case 1:
            return '过期'
          case 2:
            return '冻结'
        }
      },
      sex () {
        switch (this.userInfoData.accountType) {
          case 0:
            return '普通账户'
          case 9999:
            return '超级账户'
          default:
            return this.userInfoData.ssex
        }
      }
    },
    methods: {
      handleCancleClick () {
        this.$emit('close')
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "UserInfo";
</style>
